<div class="workflowList" *ngIf="!loading">
    <nz-row>
        <nz-col [nzSpan]="12">
            <h3>List of workflows in the project</h3>
        </nz-col>
    </nz-row>
    <nz-row>
        <nz-col [nzSpan]="8">
            <nz-button-group>
                <button nz-button [nzType]="viewMode === 'blocs'?'primary':'default'" (click)="setViewMode('blocs')">
                    <i nz-icon nzType="table" nzTheme="outline"></i>
                </button>
                <button nz-button [nzType]="viewMode === 'labels'?'primary':'default'" (click)="setViewMode('labels')">
                    <i nz-icon nzType="tags" nzTheme="outline"></i>
                </button>
                <button nz-button [nzType]="viewMode === 'lines'?'primary':'default'" (click)="setViewMode('lines')">
                    <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
                </button>
            </nz-button-group>
        </nz-col>
        <nz-col class="center" [nzSpan]="8">
            <button nz-button nzType="primary" [routerLink]="['./workflow']" [disabled]="!project.permissions.writable">
                Create a workflow
            </button>
        </nz-col>
        <nz-col [nzSpan]="8">
            <app-input-autofocus [(model)]="filter"></app-input-autofocus>
        </nz-col>
    </nz-row>
    <nz-row *ngIf="project && project.workflow_names && project.workflow_names.length > 0">
        <nz-col [nzSpan]="24">
            <ng-container [ngSwitch]="viewMode">
                <ng-container *ngSwitchCase="'blocs'">
                    <app-project-workflows-blocs [project]="project" [workflows]="filteredWorkflows"
                                                 (edit)="editLabels()">
                    </app-project-workflows-blocs>
                </ng-container>
                <ng-container *ngSwitchCase="'labels'">
                    <app-project-workflows-labels [project]="project" [labels]="project.labels"
                                                  [workflows]="filteredWorkflows" (edit)="editLabels()">
                    </app-project-workflows-labels>
                </ng-container>
                <ng-container *ngSwitchCase="'lines'">
                    <app-project-workflows-lines [project]="project" [labels]="project.labels"
                                                 [workflows]="filteredWorkflows" (edit)="editLabels()">
                    </app-project-workflows-lines>
                </ng-container>
            </ng-container>

        </nz-col>
    </nz-row>
    <nz-row *ngIf="!project || !project.workflow_names || project.workflow_names.length === 0">
        <nz-col [nzSpan]="24">
            <nz-alert nzType="info" nzMessage="No application"></nz-alert>
        </nz-col>
    </nz-row>
</div>
<nz-spin *ngIf="loading" nzTip="Loading workflows..."></nz-spin>
